<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新密码</title>
    <link rel="stylesheet" href="css/login_reg.css" type="text/css">
    <script src="js/jquery-3.3.1.js"></script>
    <script >
        //密码校验
        function checkPwd(){
            //1.获取新密码
            var password = $("#newpwd").val();
            //2.定义正则表达式
            var reg_password = /^\w{4,17}$/;
            //3.判断 并且给出提示信息
            var flag = reg_password.test(password);
            if(flag){
                //符合,则校验通过
                $("#newpwd").css("border","");
            }else {
                //不符合,则校验不通过
                $("#newpwd").css("border","1px solid red");
            }
            return flag;
        }
        //密码一致校验
        function checkPwdAgain(){
            //1.获取再次输入的密码
            var password = $("#newpwdagain").val();
            var passwordagain = $("#newpwd").val();
            var flag=(password===passwordagain);
            if(flag){
                //符合,则校验通过
                $("#newpwdagain").css("border","");
            }else {
                //不符合,则校验不通过
                $("#newpwdagain").css("border","1px solid red");
            }
            return flag;
        }
        $(function (){
            $("#sub").click(function (){

               if (checkPwd&&checkPwdAgain){
                   $.post(
                       //uri
                       "/music/user/updatePassword",
                       //参数
                       $("#newPwdForm").serialize(),
                       //回调函数
                       function (info){
                           if (info.flag) {
                               alert("修改成功")
                               location.href = "userlogin.html";
                           }
                           else {
                               $("#errorMsg").html(info.errorMsg);

                           }
                       },"json");
               }
            });
            $("#newpwd").blur(checkPwd&&checkPwdAgain);
            $("#newpwdagain").blur(checkPwdAgain);

        });

    </script>
</head>
<body class="login-bg">

<div class="login">
    <div class="message">新密码
    </div>
    <div id="darkbannerwrap"></div>
    <form id="newPwdForm" action="" method="post" >
        <input name="newPwd"  id="newpwd" type="password" placeholder="请输入新的密码" >
        <hr class="hr15">
        <input name="newPwdAgain"  id="newpwdagain" type="password" placeholder="再次输入新的密码" >
        <hr class="hr15">
        <input type="button" id="sub" value="修改">
        <hr class="hr20" >
        <div id="errorMsg" style="margin: 0 auto ; text-align: center"/>
    </form>
    <div>
        <a href="userlogin.html" style="float: left">登录</a>
    </div>
</div>